<template>
	<view class="wrap">
		<view class="form">
			<view class="cell">
				<view class="item" @click="selectAddress('1')">
					<view class="label">选择城市</view>
					<view class="input-box">
						<u--input v-model="form.cityName" disabled disabledColor="transparent" placeholder="请选择城市" border="none"></u--input>
					</view>
				</view>
				<view class="item" @click="selectAddress('2')">
					<view class="label">选择地区/镇</view>
					<view class="input-box">
						<u--input v-model="form.sareaName" disabled disabledColor="transparent" placeholder="请选择地区/镇" border="none"></u--input>
					</view>
				</view>
				<view class="item">
					<view class="label">详情地址以及门牌号</view>
					<view class="input-box">
						<u-input v-model="form.address" border="none" placeholder="请输入详情地址以及门牌号" />
					</view>
				</view>
			</view>
			<view class="cell">
				<view class="item">
					<view class="label">联系人</view>
					<view class="input-box">
						<u-input v-model="form.sname" border="none" placeholder="请输入联系人" />
					</view>
				</view>
				<view class="item">
					<view class="label">联系电话</view>
					<view class="input-box">
						<u-input v-model="form.telphone" border="none" placeholder="请输入联系电话" />
					</view>
				</view>
			</view>
			<view class="cell">
				<view class="item1">
					<view class="label">
						<view class="title">设为默认地址</view>
						<view class="desc">每次下单会使用默认服务地址</view>
					</view>
					<view class="input-box">
						<u-switch v-model="form.isDefault" activeColor="#3BC986"></u-switch>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom">
			<u-button s color="#21B579" type="success" @click="submit">提交</u-button>
		</view>
		<u-picker :show="showPicker" :columns="columns"  keyName="name" @confirm="confirm" @cancel="cancel"></u-picker>
		<!-- <itmister-address-picker ref="addressEl" @confirmChange="confirmChange"></itmister-address-picker> -->
	</view>
</template>

<script>
// import itmisterAddressPicker from '@/components/itmister-address-picker/itmister-address-picker.nvue';
export default {
	components: {
		// itmisterAddressPicker
	},
	data() {
		return {
			form: {
				stype:'',
				addrId:'',
				province: '',
				city: '',
				cityName:'',
				sarea:'',
				sareaName:'',
				sname: '',
				address:'',
				telphone: '',
				// detail: '',
				// addr: '',
				// district: '',
				isDefault: true,
				
			},
			columns: [],
			cityList: [],
			areaList: [],
			columnData: {},
			selecType:'1',
			showPicker: false,
			type:'',//跳转页面类型，1 的时候跳转到选择地址页面
			rules: {
				name: [
					{
						required: true,
						message: '请输入姓名',
						trigger: ['blur', 'change']
					}
				],
				mobile: [
					{
						required: true,
						message: '请输入电话',
						trigger: ['blur', 'change']
					},
					{
						// 自定义验证函数，见上说明
						validator: (rule, value, callback) => {
							// 上面有说，返回true表示校验通过，返回false表示不通过
							// uni.$u.test.mobile()就是返回true或者false的
							return uni.$u.test.mobile(value);
						},
						message: '手机号码不正确',
						// 触发器可以同时用blur和change
						trigger: ['change', 'blur']
					}
				],
				addr: [
					{
						required: true,
						message: '请输入地区',
						trigger: ['blur', 'change']
					}
				],
				detail: [
					{
						required: true,
						message: '请输入详细地址',
						trigger: ['blur', 'change']
					}
				]
			}
		};
	},
	onLoad(options) {
		console.log(options)
		this.getCity()
		if (options.addrObj) {
			const data = JSON.parse(options.addrObj);
			this.form.phone = data.phone;
			this.form.stype = data.id?'1':'0';
			this.form.addrId = data.id?data.id:'0';
			this.form.sname = data.sname;
			this.form.telphone = data.telphone;
			this.form.province = data.province;
			this.form.city = data.city;
			this.form.cityName = data.city_name;
			this.form.sarea = data.city;
			this.form.sareaName = data.area_name;
			this.form.address = data.address;
			this.form.isDefault = data.isDefault === '1' ? true : false;
			
			// this.form.district = data.district;
			// this.form.isDefault = data.isDefault === '1' ? true : false;
			// this.form.addr = `${data.province}/${data.city}/${data.district}`;
		}
		if(options.type){
			this.type = options.type
		}
	},
	methods: {
		submit() {
			// this.$refs.uForm.validate().then(res => {
			// 	uni.$u.toast('校验通过')
			// 	const params = JSON.parse(JSON.stringify(this.form))
			// 	delete params.addr
			// 	params.isDefault = params.isDefault?'1':'0'
			// 	this.$api.post('/address/edit',params).then(res=>{
			// 		if(res.success){
			// 			console.log(res)
			// 			uni.navigateTo({
			// 				url:'../addressList/addressList'
			// 			})
			// 		}
			// 	})
			// 	console.log(this.form)
			// }).catch(errors => {
			// 	uni.$u.toast('校验失败')
			// })
			console.log(this.form);
			if (this.form.sname === '') {
				uni.$u.toast('请输入联系人');
			}
			let params = {...this.form,isDefaylt:this.form.isDefault?'1':'0',street:'111'}
			this.$api.post('/fit/updateAddr', params).then((res) => {
				console.log(res)
				if (res.retCode==="0000") {
					console.log(res);
					if(this.type==1){
						uni.redirectTo({
							url: '/pages/addAddr/modules/selectAddr'
						});
					}else{
						uni.navigateTo({
							url: '../addressList/addressList'
						});
					}
					
				}
			});
		},
		// 确认选中
		confirmChange(address) {
			console.log(address);
			this.form.province = address.province;
			this.form.city = address.city;
			this.form.district = address.area;
			this.form.addr = address.province + '/' + address.city + '/' + address.area;
		},
		
		getChooseLocation() {
			uni.chooseLocation({
				success: function (res) {
					console.log('位置名称：' + res.name);
					console.log('详细地址：' + res.address);
					console.log('纬度：' + res.latitude);
					console.log('经度：' + res.longitude);
				}
			});
		},
		// 打开窗口
		selectAddress(type) {
			// console.log(type)
			this.selecType = type
			if(type==='1'){
				this.columns = this.cityList
			}else{
				this.columns = this.areaList
			}
			this.showPicker = true;
			// this.$refs.addressEl.show();
		},
		// 
		confirm(address){
			// console.log(address.value)
			let data = address.value[0]
			if(this.selecType==='1'){
				this.form.province = data.id;
				this.form.city = data.id;
				this.form.cityName = data.name;
			}else{
				
				this.form.sarea = data.id;
				this.form.sareaName = data.name;
			}
			// console.log(this.formName)
			this.showPicker = false
		},
		cancel(){
			this.showPicker = false
		},
		// 获取首页地市
		getCity() {
			this.$api.get('/common/area').then((res) => {
				// 因为现在只有上海市一个数据，所以先做了简单处理，因为不知道后续格式，先就这
				// console.log(res);
				this.columnData = res.data;
				this.cityList = [[{ name: res.data.name, id: res.data.id }]];
				this.areaList = [res.data.list]
				// console.log(this.areaList)
				this.columns = this.cityList
				// this.areaList = res.data.list;
			});
		},
	}
};
</script>
<style lang="scss" scoped>
page {
	// background: #fff;
}

.wrap {
	box-sizing: border-box;
	padding: 20rpx 32rpx;
	padding-bottom: 100rpx;
	.cell {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 32rpx;
		margin-bottom: 32rpx;
		.item {
			// margin-top: 38rpx;
			.label {
				margin: 20rpx 0;
				color: #333;
				font-size: 28rpx;
				font-weight: 500;
				// margin-bottom: 38rpx;
			}
			.input-box {
				background-color: #f8f9fa;
				padding: 18rpx 20rpx;
				border-radius: 16rpx;
				// height: 86rpx;
			}
			.active {
				border: 2rpx solid #f00;
			}
		}
		.item1 {
			display: flex;
			justify-content: space-between;
			align-items: center;
			.label {
				color: #333;
				font-size: 28rpx;
				font-weight: 500;
				.desc {
					font-size: 22rpx;
					color: #999999;
					font-weight: 400;
				}
			}
			.input-box {
				// background-color: #F8F9FA;
				// padding: 18rpx 20rpx;
				// border-radius: 16rpx;
				// height: 86rpx;
			}
			.active {
				border: 2rpx solid #f00;
			}
		}
	}
	.bottom {
		position: fixed;
		bottom: 0rpx;
		padding-bottom: 30rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
		left: 0;
		right: 0;
		background-color: #F7F7F8;
	}
}
</style>
